<template>
  <div class="about">
    <div class="box">
	    <p>~ Today I need to ~</p>
	    <input type="text"
	           placeholder="请输入你的任务名称，按回车键确认"
	           @keyup.enter="add"
	           v-model="title"/>
    </div>
  </div>
</template>
<style lang="scss">
	*{
		margin: 0;
		padding: 0;
		background: pink;
	}
	.about{
		width: 100%;
	}
	.box{
		text-align: center;
		align-content: center;
	}
</style>
<script>
	import {nanoid} from "nanoid";
	export default {
		name: "AboutView",
		props: ["addTodo"],
		data(){
			return { title: ''}
		},
		methods: {
			add(){
				if (!this.title.trim()) {
					return alert('输入不能为空');
					const todoObj = {
						id: nanoid(),
						title: this.title,
						done: false,
					};
					this.addTodo(todoObj);
					this.title = "";
				}
			},
		},
	};
</script>
